<template>
  <div class="cardWrapper" :id="`menuScroll${scrollFirstIndex}-${componentsIndex}`" v-if="layerItem.children.length">
    <div class="cardTitleContainer">
      <img src="https://img3.job1001.com/data_center/images/position_item_icon.png" alt="Icon"
        class="position_item_icon" />
      <div class="cardTitle">{{ layerItem.title }}</div>
    </div>
    <div class="layerList">
      <el-row class="demo-autocomplete" :key="index" v-for="item,index in layerItem.children||layerList">
        <div class="demo-autocomplete-content" v-if="handleDisplayContent(item)">
          <div class="controlLine" :id="`scroll${componentsIndex}-${index}`">
            <span class="tinyTitle">
              <div class="titleFlag"></div>
              {{ item.title }}
            </span>
            <div class="line"></div>
            <!-- 校园版要关掉编辑 -->
            <div class="saveBtns" v-if="!isSuperToken&&!(item.data instanceof Array)&&false">
              <div class="contentItemEditAndAIBtn AIBtn" @click="aiCreate(item,index,item.title)">
                <img src="@/assets/detail/AI.png" />
                {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
              </div>
              <div class="contentItemEditAndAIBtn" @click="editCurrent(item, index)">
                <img src="@/assets/detail/edit.png" />
                {{ item.currentEdit ? "退出编辑" : "编辑" }}
              </div>
              <div class="contentItemEditAndAIBtn" @click="save(item,index)"
                v-if="isAdmin == true && item.currentEdit && editAll">
                <img src="@/assets/detail/save.png" />保存
              </div>
              <button class="rightBtn saveAllBtn" @click="save(item,index)"
                v-if="isAdmin && !editAll && item.currentEdit">
                保存
              </button>
            </div>
          </div>
          <!-- 正常展示 -->
          <div class="editBox" v-if="!item.currentEdit">
            <div class="normalTextDisplayContainer">
              <div :class="{'normalTextDisplay':true,'close':item.isClose}">
                <div v-if="item.data != ''" v-html="handleDisplayContent(item)" class="aiContent"></div>
                <div v-if="item.extendContent&&item.extendContent.length > 0" class="editBoxRight noEdit">
                  <div class="extendsItem" v-for="(item_item, item_index) in item.extendContent" v-html="item_item"
                    :key="item_index"></div>
                </div>
              </div>
              <div class="openButton" @click="handleOpenButtonClick(item)" v-if="item.isClose">查看全文 <img
                  src="@/assets/detail/openButtonDownIcon.png" /></div>
            </div>
            <!-- 展示一些视频 -->
            <div class="playlistContainer" v-if="['79','80'].includes(item.layerId)">
              <div class="playlistItem" v-if="item.layerId==79&&postionVideo" :key="index"
                @click="handleContentClick(postionVideo)">
                <img :src="postionVideo.picture" alt="">
                <div class="playlistItemName">{{postionVideo.videoName}}</div>
              </div>
              <div class="playlistItem" v-if="item.layerId==80&&careerVideo" :key="index"
                @click="handleContentClick(careerVideo)">
                <img :src="careerVideo.picture" alt="">
                <div class="playlistItemName">{{careerVideo.videoName}}</div>
              </div>
            </div>
          </div>
          <!-- 2023年8月24日15:29:01 v1.1版本只能编辑文字的 -->
          <!-- 编辑文字的 -->
          <div class="editBox" v-if="item.currentEdit&&!item.listContent ">
            <div class="editBoxLeft">
              <el-input v-model="item.allContent" type="textarea" autosize :rows="10" placeholder="请输入内容" clearable
                resize="none" key="extend" />
              <div class="deleteContent" @click="deleteContent(item,index)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <div class="editBoxRight" v-if="item.extendContent&&item.extendContent.length > 0">
              <div v-for="(item_item, item_index) in item.extendContent" class="extendsItem">
                <div v-html="item_item"></div>
                <div class="replaceByOne" @click="replaceByOne(item,item_item, index)">
                  一键替换
                </div>
              </div>
            </div>
          </div>
          <div class="editBox" v-if="item.currentEdit && item.listContent&&false">
            <div class="editBoxLeft">
              <div class="fakeTextArea">
                <div class="listContentItem" v-for="_item,_index in item.listContent">
                  <el-input type="textarea" :key="_item.questionId+''+_index" v-model="_item.layerValue" autosize
                    :rows="2" placeholder="请输入内容" clearable resize="none">
                  </el-input>
                  <div class="deleteListContent">
                    <i class="el-icon-close" @click="deeleteListContentItem(item,_item,index,_index)"></i>
                  </div>
                </div>
                <button class="addListContentBtn" @click="addListContentItem(item)">新增</button>
              </div>
              <div class="deleteContent" @click="deleteListContent(item)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <div class="editBoxRight">
              <div v-for="(item_item, item_index) in item.extendContent" class="extendsItem">
                <div v-html="item_item"></div>
                <div class="replaceByOne" @click="replaceByOne(item,item_item, index)">
                  一键替换
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-row>
    </div>
    <websocket ref="child" @initMessageBack="initMessageBack" />
    <videoPlayerDialog v-if="videoPlayerVisible" :dialogVisible.sync="videoPlayerVisible" :mediaSrc="mediaSrc"
      :playingVideoId.sync="playingVideoId" @refreshOuterVideoList="reqGetPlaylist" />
  </div>
</template>

<script>
import {
  saveAnswerInfo,
  homepageQuestion,
  valueListUpdate,
  valueListAnalysis,
} from "@/api/position-detail";
import { addLog } from "@/api/position";
import { campusVideos } from "@/api/mine.js";
import { operateSave } from "@/api/data";
import Websocket from "@/components/Websocket";
export default {
  name: "generalTextComponent",
  props: {
    layerList: {
      type: Array,
      default: () => [],
    },
    layerItem: {
      type: Object,
      default: () => {},
    },
    topId: {
      type: String,
      required: true,
    },
    isSuperToken: {
      type: Boolean,
      default: false,
    },
    scrollFirstIndex: {
      type: [String, Number],
      default: 0,
    },
    aiCreateStatus: {
      type: Boolean,
      default: false,
    },
    isAdmin: {
      type: Boolean,
      default: false,
    },
    editAll: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    layerItem: {
      handler(newValue, oldValue) {
        if (newValue.layerId) {
          this.layerList.forEach((item, index) => {
            if (item.layerId == newValue.layerId) {
              this.componentsIndex = index;
              if (item.layerId == 19) {
                this.reqGetPlaylist();
              }
            }
          });
          //如果内容是文字并且过长，则显示查看全文按钮
          newValue.children.forEach((item) => {
            const answer = item.data.answer;
            if (
              typeof answer === "object" &&
              answer !== null &&
              answer.answerContent.length >= 300
            ) {
              this.$set(item, "isClose", true);
            }
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      videoPlayerVisible: false,
      playingVideoId: "",
      mediaSrc: "",
      careerVideo: "",
      postionVideo: "",
      currentEdit: false,
      positionId: this.$route.query.id,
      componentsIndex: "", //用来标记组件下标，滚动用
      layerDataList: [],
      messages: [],
      currentButton: "",
    };
  },
  methods: {
    handleOpenButtonClick(item) {
      this.$set(item, "isClose", false);
      //console.log("handleOpenButtonClick", item);
    },
    handleContentClick(item, index) {
      this.mediaSrc = item.playUrl;
      this.playingVideoId = item.videoId;
      this.videoPlayerVisible = true;
    },
    //只有特定的维度需要请求和展示，例如就业前景的职业现状和发展前景
    reqGetPlaylist() {
      const params = {
        positionId: this.$route.query.id,
      };
      campusVideos(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              switch (item.videoType) {
                case 2:
                  this.careerVideo = item;
                  break;
                case 3:
                  this.postionVideo = item;
                  break;

                default:
                  break;
              }
            });
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {});
    },
    //删文字的
    deleteContent(item) {
      item.allContent = "";
    },
    replaceByOne(item, _item, index) {
      //有listContent为数组就是编辑多条的的
      if (item.listContent instanceof Array) {
        const params = {
          questionContent: _item,
          id: item.questionId,
          ylPositionId: this.positionId,
        };
        valueListAnalysis(params).then((res) => {
          if (res.code == 200) {
            item.listContent = res.data;
            //console.log("replaceByOne", item);
          } else {
            //console.log("内容解析失败了！请尝试重新生成！");
          }
        });
      } else {
        let itemReplaced = _item.replace(/<br>/g, "\n");
        item.allContent = itemReplaced;
      }
    },
    //删全部
    deleteListContent(item) {
      item.listContent = [];
    },
    //删一个
    deeleteListContentItem(item, _item, index, _index) {
      item.listContent.splice(_index, 1);
    },
    //单个编辑
    editCurrent(item, index) {
      if (item.currentEdit) {
        this.$confirm("此操作将不保存已修改内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$set(item, "currentEdit", !item.currentEdit);
        });
      } else {
        if (item.data instanceof Array) {
          this.$set(item, "listContent", [...item.data]);
        } else {
          //如果是直接展示文字的
          const answer = item.data.answer;
          this.$set(
            item,
            "allContent",
            answer ? answer.answerContent.replace(/<br>/g, "\n") : "待补充"
          );
        }
        this.$set(item, "currentEdit", !item.currentEdit);
      }
      console.log(
        "item.currentEdit",
        item.currentEdit,
        this.editAll,
        this.isAdmin
      );
    },
    //单个保存
    save(item) {
      //有allContent就是直接编辑文字的
      if (item.allContent) {
        this.$confirm("此操作将覆盖原有内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.positionId = this.$route.query.id;
            const params = {
              ylPositionId: this.positionId,
            };
            params.questionId = item.questionId;
            params.answerContent = item.allContent;
            saveAnswerInfo(params).then((response) => {
              if (!item.data.answer) {
                item.data.answer = {};
              }
              this.$set(
                item.data.answer,
                "answerContent",
                item.allContent.replace(/\n/g, "<br>")
              );
            });
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            item.extendContent = [];
            item.currentEdit = false;
          })
          .catch(() => {
            this.$message({
              type: "success",
              message: "已取消修改",
            });
          });
      } else {
        this.$confirm("确定要保存吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const params = {
            id: item.questionId,
            ylPositionId: this.positionId,
            questionContent: item.listContent
              .map((item) => {
                return item.layerValue;
              })
              .join("、"),
          };
          valueListUpdate(params).then((res) => {
            //console.log("valueListUpdate", res);
            item.data = res.data;
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            item.extendContent = [];
            item.currentEdit = false;
          });
        });
      }
    },
    async aiCreate(item, columnIndex, columnName) {
      if (this.aiCreateStatus) {
        this.$message({
          type: "warning",
          message:
            "已有AI正在生成中，等待生成内容结束或F5刷新页面再次点击AI生成!",
        });
        return;
      } else {
        this.$emit("update:aiCreateStatus", true);
        let textEl = document.querySelectorAll(".AIBtn"); // 获取要添加省略号的元素
        textEl.forEach((item) => {
          item.classList.add("AILoading"); // 添加类名，启动动画效果
        });
      }
      const name =
        this.$route.query.name != undefined ? this.$route.query.name : "";
      if (item.data.questionContent) {
        this.chatKey = item.data.questionContent.replace(/{}/g, name);
      } else {
        const questionRes = await this.reqGetQuestionbyId(item.questionId);
        this.chatKey = questionRes.data.questionContent.replace(/{}/g, name);
      }

      this.currentButton = columnIndex;

      this.messages.push({
        role: "user",
        content: this.chatKey,
      });
      const agentData = {
        userId: "",
        userName: "",
        messages: this.messages,
      };
      this.messages = [];
      this.sendMsg = JSON.stringify(agentData);
      if (!item.extendContent) {
        this.$set(item, "extendContent", []);
      }
      this.$set(item.extendContent, item.extendContent.length, "");
      this.$refs.child.send(this.sendMsg, this.initMessageBack, this.wsError);
      this.$message.success({
        message: "AI生成内容中...",
        offset: "400",
      });
      addLog({ logType: "10" });
      operateSave({
        ylPositionId: this.positionId,
        description: `AI生成-${columnName}`,
      });
    },
    //有的他妈的纬度不会给问题 还要自己请求一下获取问题
    reqGetQuestionbyId(questionId) {
      return homepageQuestion({ questionId });
    },
    adminInit() {
      const userToken = VueCookies.get("vue_admin_template_token");
      if (userToken === "admin-token") {
        this.isAdmin = true;
      }
    },
    initMessageBack(res) {
      this.loading = true;
      if (res === "err") {
        this.loading = false;
        return;
        // (this.showError = true);
      }
      const msg = res.choices && res.choices[0];
      if (!this.currentRole) {
        this.currentRole = msg.delta.role;
      }
      if (msg.delta.role === "assistant") {
        return;
      }
      if (msg.finish_reason === "stop" || msg.finish_reason === "done") {
        this.loading = false;
        // this.currentMsg = "";
        this.currentRole = "";
        this.$emit("update:aiCreateStatus", false);
        let textEl = document.querySelectorAll(".AIBtn");
        textEl.forEach((item) => {
          item.classList.remove("AILoading");
        });
        return;
      }
      if (msg.delta.content) {
        var tempStr = msg.delta.content;
        if (tempStr) {
          tempStr = tempStr.replace(/(\r\n|\n|\r)+/g, "<br>");
        }

        let extendContent =
          this.layerItem.children[this.currentButton].extendContent;
        let len = extendContent ? extendContent.length - 1 : 0;
        this.$set(extendContent, len, (extendContent[len] += tempStr));
      }
    },
    wsError() {
      if (this.isStoped) {
        this.isContinue = false;
      } else {
        this.isContinue = true;
      }
      //console.log("连接失败，请重试");
    },
    //处理一下用来显示的内容
    handleDisplayContent(item) {
      const data = item.data;
      if (data instanceof Array) {
        let content = "";

        data.forEach((_item, index) => {
          if (_item.description && _item.layerValue) {
            content +=
              index +
              1 +
              ". " +
              _item.description +
              " " +
              _item.layerValue +
              "<br />";
          } else {
            content +=
              index +
              1 +
              ". " +
              _item.tagName +
              " " +
              _item.tagTimeDesc +
              "<br />";
          }
        });
        return content;
      }

      if (data instanceof Object) {
        const content = data.answer ? data.answer.answerContent : "待补充";
        return content.replace(/\n/g, "<br>");
      }
    },
  },
  components: {
    Websocket,
    videoPlayerDialog: () => import("@/components/videoPlayerDialog"),
  },
};
</script>

<style lang="scss" scoped>
.cardWrapper {
  // position: relative;
  min-width: 800px;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  background-size: 110% 219px;
  background-position: -10px -10px;
  background-image: url("https://img3.job1001.com/data_center/images/salary_bg.png");
  background-repeat: no-repeat;
  padding: 20px;
  flex: 1;
  margin: 0;

  margin-bottom: 14px;
  // margin-top: 20px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
  .cardTitleContainer {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    // position: sticky;
    top: 0;
    .cardTitle {
      height: 30px;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 30px;
      margin-right: 15px;
    }
    .introduceJobInput {
      width: 400px;
    }
    .introduceJob {
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 21px;
      margin-right: 38px;
    }
    .position_item_icon {
      width: 39px;
      height: 40px;
      margin-right: 13px;
    }
  }

  .layerList {
    .demo-autocomplete {
      display: flex;
      .demo-autocomplete-content {
        flex: 1;
      }
      .positionPic {
        width: 140px;
        // height: 137px;
        border-radius: 16px;
        opacity: 0.77;
      }
    }
  }

  // 以下是通用样式
  .contentItemEditAndAIBtn {
    line-height: 32px;
    margin: 0 10px 0 15px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      width: 22px;
      height: 22px;
    }
  }
  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
  .controlLine {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    .tinyTitle {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 18px;
      // margin-right: 24px;
    }
    .line {
      flex: 1;
      // height: 16px;
      margin-left: 14px;
      border-bottom: 1px solid #efefef;
    }
    .saveBtns {
      display: flex;
      height: 32px;
      align-items: center;
      justify-content: center;
      // padding-right: 10px;
      .contentItemEditAndAIBtn {
        line-height: 32px;
        margin: 0 10px 0 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 22px;
          height: 22px;
        }
      }
    }
    .AILoading {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0px;
        height: 100%;
        background-color: transparent;
        animation-name: ellipsis;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
      }
    }
  }
  .editBox {
    width: 100%;
    display: flex;
    // padding-right: 20px;
    margin-bottom: 52px;
    .normalTextDisplayContainer {
      position: relative;
      // flex: 1 1 730px;
      flex: 1;
      min-width: 730px;
      .normalTextDisplay {
        &.close {
          height: 162px;
          overflow: hidden;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            display: block;
            width: 100%;
            height: 57px;
            background: linear-gradient(
              180deg,
              rgba(255, 255, 255, 0) 0%,
              #ffffff 100%
            );
          }
        }
      }
      .openButton {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 111px;
        height: 28px;
        background: #eff0f2;
        border-radius: 100px;
        cursor: pointer;
        z-index: 2;
        img {
          margin-left: 5px;
          width: 14px;
          height: 14px;
        }
      }
    }
    .otherNameContainer {
      display: flex;
      flex-wrap: wrap;
      max-width: 50%;
      align-content: flex-start;
      flex: 1;
      .otherName {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
        border-radius: 4px;
        border: 1px solid #b2bad4;
        padding: 7px 18px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        margin-right: 18px;
        margin-bottom: 24px;
      }
    }
    .similerContainer {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      max-width: 50%;
      align-content: flex-start;
      .similer {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
        background: #edf4ff;
        border-radius: 6px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        margin-right: 18px;
        padding: 7px 18px;
        margin-bottom: 24px;
      }
    }
    .editBoxLeft {
      flex: 1;
      position: relative;
      border: 1px solid #709cff;
      background-color: white;
      border-radius: 6px 0px 0px 6px;

      .deleteContent {
        position: absolute;
        cursor: pointer;
        right: 12px;
        top: 15px;
      }
      .fakeTextArea {
        position: relative;
        background-color: white;
        min-height: 475px;
        padding: 14px;
        .listContentItem {
          // background-color: gray;
          position: relative;
          border-radius: 4px;
          margin-bottom: 29px;
          textarea {
            position: relative;
            background-color: #eeeeee;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #555555;
            line-height: 26px;
            padding: 4px 5px 0px 6px;
            height: 100% !important;
          }
          .deleteListContent {
            position: absolute;
            display: flex;
            justify-content: flex-end;
            right: 0;
            width: 100%;
            background-color: #eeeeee;
            padding-right: 6px;
            padding-bottom: 8px;
            img {
              cursor: pointer;
            }
          }
        }
        .addListContentBtn {
          width: 100%;
          height: 32px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #4880ff;
          color: #4880ff;
          cursor: pointer;
        }
      }
    }
    .editBoxRight {
      flex: 1;
      padding: 0px 16px 0px 16px;
      background: #f5f9ff;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4b6aaf;
      line-height: 27px;
      position: relative;
      padding-bottom: 20px;
      border-radius: 0px 6px 6px 0px;
      .extendsItem {
        position: relative;
        padding-bottom: 35px;
        padding: 0px 16px;
        .replaceByOne {
          display: flex;
          justify-content: flex-end;
          position: relative;
          bottom: 0;
          right: 14px;
          cursor: pointer;
          color: #4880ff;
        }
      }
    }
    .noEdit {
      // padding: 0;
      background: transparent;
    }
    .playlistContainer {
      display: flex;
      justify-content: flex-end;
      width: 218px;
      // flex-grow: 1;
      height: 160px;
      // overflow-x: auto;
      overflow-y: hidden;
      margin-left: 47px;
      .playlistItem {
        position: relative;
        width: 217.64px;
        height: 137px;
        // margin-right: 10px;
        cursor: pointer;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 32px;
          height: 29px;
          background-image: url("../../../assets/detail/videoCoverIcon.png");
          background-repeat: no-repeat;
          background-size: 32px 29px;
        }
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 41px;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) 100%
          );
          border-radius: 0px 0px 15px 15px;
          z-index: 1;
        }
        img {
          width: 217.64px;
          height: 137px;
          border-radius: 16px;
        }
        .playlistItemName {
          position: absolute;
          bottom: 11px;
          left: 0;
          padding: 0 13px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #fff;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-inline-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          z-index: 2;
        }
      }
      &::-webkit-scrollbar-track-piece {
        background: #dee6ec;
      }

      &::-webkit-scrollbar {
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #bccad5;
        border-radius: 20px;
      }
    }
  }
  .aiContent {
    flex: 1;
    height: 100%;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 27px;
    // max-width: 90%;
    word-break: break-all;
    white-space: normal;
  }
  .saveAllBtn {
    width: 57px;
    height: 26px;
    border: none;
    background: #4880ff;
    color: #ffffff;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 4px;
    margin-left: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>